<template>
    <div class="apiCacheContainer">
        <div class="searchContainer">
            <ServiceInstanceSearch />
        </div>
        <div>
            <el-table
                :data="serviceInstanceApplicationDataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="address"
                border
                :show-overflow-tooltip="true"
                class="tableContainer"
                :span-method="tableSpanMethod"
                max-height="70vh"
            >
                <el-table-column prop="id" label="微服务ID" />
                <el-table-column prop="applicationName" label="微服务名称" />
                <el-table-column prop="instanceNum" label="实例数量" />
                <el-table-column prop="address" label="实例IP" />
                <el-table-column prop="healthy" label="健康状态" />
                <el-table-column prop="serviceName" label="微服务实例信息" />
                <el-table-column prop="weight" label="权重" />
                <el-table-column prop="metadata" label="元信息" />
            </el-table>
        </div>
    </div>
</template>

<script>
import ServiceInstanceSearch from "@/components/serviceManage/serviceInstanceManage/ServiceInstanceSearch";
import {applicationNacosInfoQuery} from "@/request/service";
import {createTag} from "@/utils/tagCreate";

export default {
    name: "ServiceInstanceManage",
    data() {
        return {
            serviceForm: {
                id: '',
                applicationName: ''
            }
        }
    },
    methods: {
        tableSpanMethod({ row, column, rowIndex, columnIndex }) {
            let dataList = this.$store.state.serviceInstanceApplicationDataList
            let dataCont = {}
            let dataRowIndex = {}
            dataList.forEach((res,index) => {
                dataCont[res.applicationName + "count"] = dataCont[res.applicationName + "count"] === undefined ? 1 : dataCont[res.applicationName + "count"] + 1;
                if (dataRowIndex[res.applicationName + "rowIndex"] === undefined) {
                    dataRowIndex[res.applicationName + "rowIndex"] = index
                }
            })
            if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
                let rowApplication = row.applicationName
                let rowApplicationIndex = dataRowIndex[rowApplication + "rowIndex"]
                if (rowApplicationIndex === rowIndex) {
                    let count = dataCont[rowApplication + "count"]
                    return {
                        rowspan: count,
                        colspan: 1,
                    }
                } else {
                    return {
                        colSpan: 1,
                        rowSpan: 1
                    }
                }
            }
        }
    },
    components: {
        ServiceInstanceSearch
    },
    computed: {
        serviceInstanceApplicationDataList() {
            return this.$store.state.serviceInstanceApplicationDataList;
        },
        serviceInstanceApplicationSearchData() {
            return this.$store.state.serviceInstanceApplicationSearchData
        }
    },
    created() {
        applicationNacosInfoQuery(this.serviceInstanceApplicationSearchData).then(res => {
            if (res.code === '200') {
                this.$store.commit('changeServiceInstanceApplicationDataList', res.data);
            }
        })
    },
    mounted() {
        createTag(this.$route, this.$store)
    }
}
</script>

<style scoped lang="less">
.apiCacheContainer {
    width: 98%;
    height: 100%;
    margin: 0.2%;
    .searchContainer {
        width: 100%;
        margin-top: 1%;
    }
    .tableContainer {
        margin-left: 1%;
    }
    .insertContainer {
        margin-left: 1%;
        margin-top: 0.7%;
    }
}
</style>